<template>
  <a-modal
    :title="title"
    unmount-on-close
    v-model:visible="modalVisible"
    :maskClosable="false"
    v-bind="$attrs"
    @ok="handleOk"
    @before-open="handleBeforeOpen"
    @close="handleClose"
    width="50%"
  >
    <table-index :table="table" @loadData="loadData">
      <template #time="{ record }">
        <div v-if="record.startTime">{{ record.startTime }}</div>
        <div v-if="record.endTime">{{ record.endTime }}</div>
      </template>
    </table-index>
  </a-modal>
</template>

<script setup lang="ts">
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { computed, reactive } from 'vue'
  import { queryReceivableAPI } from '@/api/dashboard/account'

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => ({}),
    },
  })

  const emit = defineEmits(['update:visible', 'ok', 'close'])

  // 计算属性处理双向绑定
  const modalVisible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value),
  })

  const table = useTable({
    columns: [
      {
        title: '期数',
        dataIndex: 'receivableNumStr',
      },
      {
        title: '应结日期',
        dataIndex: 'dueDate',
      },
      {
        title: '每期应付金额',
        dataIndex: 'dueAmount',
        unit: '元',
      },
    ],
  })

  const queryParam = reactive<any>({})

  const loadData = useFetchTableDataApi(table, queryParam, queryReceivableAPI)

  const handleBeforeOpen = () => {
    queryParam.carId = props.params.carId
    loadData()
  }

  const handleClose = () => {
    table.dataList = []
    emit('close')
  }

  // 处理事件
  const handleOk = () => {
    emit('ok')
  }
</script>

<style scoped lang="less"></style>
